<template>
  <div class="columns-container">
    <split-pane split="vertical" :min-percent="15" :default-percent="20" @resize="resize">
      <template slot="paneL">
        <div class="app-page">
          <!-- 头 -->
          <div class="app-header">
            <div class="app-title">
              <i class="el-icon-folder"></i> 产品分类
            </div>
            <div class="app-tools">
              <el-button type="text" icon="el-icon-table-lamp" size="small" @click="toggleTree(!isOpen)">
                切换
              </el-button>
            </div>
          </div>
          <!-- 树 -->
          <div class="tree-box">
            <el-tree
              ref="tree"
              :data="treeData"
              :props="defaultProps"
              highlight-current
              node-key="_id"
              @node-click="handleNodeClick"
            >
              <span slot-scope="{ node }" :title="node.label" class="custom-tree-node">
                <span>{{ node.label }}</span>
              </span>
            </el-tree>
          </div>
        </div>
      </template>
      <template slot="paneR">
      </template>
    </split-pane>
  </div>
</template>

<script>
import splitPane from 'vue-splitpane'
import { getData } from '@/mock/index'
import { arrayToTree, sortTreeByField } from '@/utils/tree.js'
export default {
  name: 'ColumnsCategoryEdit',
  components: {
    splitPane
  },
  data () {
    return {
      isOpen: false,
      // 机构树
      treeData: [],
      // 树配置
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created () {
    // 获取树数据
    this.getTreeData()
  },
  methods: {
    /**
     * 架构
     */
    resize () {
      console.log('resize')
    },
    // 获取分类列表
    async getTreeData () {
      this.tableLoading = true
      // 模拟表格数据
      const tableData = [
        {
          enname: '',
          parent_name: '',
          description: '',
          sort: 1,
          thumbnail: '',
          status: '0',
          _id: '5e66f8d9a9c278223cbb8b23',
          name: '一级分类',
          __v: 0
        },
        {
          enname: '',
          parent_name: '一级分类',
          description: '',
          sort: 1,
          thumbnail: '',
          status: '0',
          _id: '5e66fb5c9de3e92b34bde6cd',
          parent_id: '5e66f8d9a9c278223cbb8b23',
          name: '二级分类1',
          __v: 0
        },
        {
          enname: '',
          parent_name: '二级分类1',
          description: '',
          sort: 1,
          thumbnail: '',
          status: '0',
          _id: '5e6708d1ba5977022480cf22',
          parent_id: '5e66fb5c9de3e92b34bde6cd',
          name: '三级分类',
          __v: 0
        },
        {
          enname: '',
          parent_name: '一级分类',
          description: '',
          sort: 2,
          thumbnail: '',
          status: '0',
          _id: '5e67081cba5977022480cf20',
          parent_id: '5e66f8d9a9c278223cbb8b23',
          name: '二级分类2',
          __v: 0
        }
      ]
      const res = await getData({}, tableData)
      this.tableLoading = false
      if (res.code === '0000') {
        const treeData = arrayToTree(res.data, [], '_id', 'parent_id')
        this.treeData = sortTreeByField(treeData, 'sort')
      }
    },
    // 切换tree的打开状态
    toggleTree (status) {
      this.isOpen = status
      console.log(this.$refs.tree.store._getAllNodes())
      for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
        this.$refs.tree.store._getAllNodes()[i].expanded = status
      }
    },
    handleNodeClick (data) {
      // const cid = data._id
      console.log(data._id)
    }
  }
}
</script>

<style  scoped lang="scss">
.columns-container {
  height: 100%;
}

.left-container {
  background-color: #f38181;
  height: 100%;
}

.right-container {
  background-color: #fce38a;
  height: 100%;
  width: 200px;
}
.tree-box {
  padding: 10px;
  font-size: 14px;

  .custom-tree-node {
    display: inline-block;
    max-width: calc(100% - 60px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
  }
}
</style>
